<template>
	<div>
		<el-radio-group v-model="checkList">
            <el-radio v-for="(value, key) of lockExplain" :key="key" :label="key">{{value}}</el-radio>
		</el-radio-group>
		<p class="mt-3">备注说明</p>
		<el-input type="textarea" v-model="remark" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入内容">
		</el-input>

		<div class="mt-3">
			<el-button type="primary" size="small" @click="confirm">确定</el-button>
			<el-button size="small" @click="cancel">取消</el-button>
		</div>
	</div>
</template>

<script>
import {mapState} from 'vuex';

	export default {
		name: 'UnlockingExplainDialog',
		props: {
			data: Object,
			show: Boolean
		},
		data() {
			return {
				checkList: '1',
				remark: '',
                loading: null,
			}
        },
        computed: {
            ...mapState({
                lockExplain: 'lockExplain',
                userInfo: 'userInfo'
            })
        },
		watch: {
			show: {
				handler(cur){
					if(cur === false) {
						this.remark = '';
						this.checkList = '1';
					}
				}
			}
		},
		methods: {
			confirm(){
				this.loading = this.$loading({
					fullscreen: true,
					lock: true,
					text: '正在请求...'
				});
				let url = this.$obHttp.Api.nbOpenLock,
					lockId = this.data.id;
				this.$obHttp.httpPost(`${url}${lockId}`, {
					"lockId": lockId,
					"operator": this.userInfo.userNo,
					"reasonType": this.checkList,
					"remark": this.remark
				}).then(response=>{
					this.loading.close();
					this.loading = null;
					if( response ){
						this.$message({
							message: '请求服务器成功!',
							type: 'success'
						});
						this.$emit('closeUnlockExplain');
					}
				});
			},
			cancel(){
				this.$emit('closeUnlockExplain');
			}
		}
	}

</script>

<style lang="scss" scoped>

</style>
